
// @ts-nocheck
import React, { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Form, TextArea, Button, Toast, Picker, NavBar, Input } from "antd-mobile";
import { PersonnelModel } from '@/components';
import { useSelector, useDispatch } from 'react-redux';
import { serviceInput } from "../service";
import { serviceTypeMenu, serviceProjectMenu } from './utils/menu';
import { UploaderFile } from '@/components'
import './index.less'

const ServiceEnter: React.FC = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const serviceEnterParams = useSelector((state: any) => state.serviceEnterParams.serviceParams)
  const [form] = Form.useForm();
  const location = useLocation().state;
  const [imageList, setImageList] = useState<{ url: string; name: string }[]>([]);
  const [serviceUserIdList, setServiceObject] = useState<string>('')
  const [visible1, setVisible1] = useState<boolean>(false)

  useEffect(() => {
    setServiceObject(serviceEnterParams?.serviceUserIdList)
    form.setFieldsValue({
      ...serviceEnterParams,
      serviceType: location?.serveType,
      serviceProject: location?.serveName,
    })
  }, [location, serviceEnterParams])
  const onChangeValue = (val) => {
    dispatch({
      type: 'serviceEnterParams/onServiceEnterParams',
      payload: {
        serviceDescribe: val,
      }
    })
  }
  
  const onUploaderFile = (data) => {
    const imgList = data.map((item)=>{
      delete item.key
      return item
    })
    dispatch({
      type: 'serviceEnterParams/onServiceEnterParams',
      payload: {
        img: imgList,
      }
    })
    setImageList(imgList)
  }
  const onPersonnel = (val) => {

    form.setFieldsValue({
      serviceUserIdList: val
    })
    setServiceObject(val)
    dispatch({
      type: 'serviceEnterParams/onServiceEnterParams',
      payload: {
        serviceUserIdList: val,
      }
    })
  }
  const openServiceSelect = (type: number) => {
    if (type === 3) {
      navigate('/serviceScore', { state: { ...location } })
    }
  }
  const goPersonnel = (type: number) => {
    if (type === 1) {
      navigate('/personnel', { state: { ...location } })
    } else {
      setVisible1(true)
    }
  }
  const onFinish = (values) => {
    const imgUrl = imageList.map((item)=>(item.url)).join()
    serviceInput({
      ...values,
      img: imgUrl,
      serviceDept:location?.serveOrganization,
      planId:location?.id
    })
      .then((res) => {
        if (res.code === 200) {
          Toast.show({
            icon: "success",
            content: "提交成功",
            afterClose: () => {
              window.history.back()
            }
          });
        } else {
          Toast.show({
            icon: "fail",
            content: "提交失败",
          });
        }
      })
  }
  return (
  <div className="serviceCentent">
    <div className="header">
			<div>
				<NavBar onBack={() => navigate(-1)}>
					<div className="commontitle">服务录入</div>
				</NavBar>
			</div>
		</div>
    <div className="centent_box">
      <Form
        form={form}
        onFinish={onFinish}
        layout="horizontal"
      >
        <Form.Item name="serviceUserIdList" label="服务对象" rules={[
          { required: true }
        ]}>
          <div onClick={() => goPersonnel(0)} className="vlaue_box">
            {
              serviceUserIdList.length>0 ?
                <span className="yes_text">{(serviceUserIdList.map(item=>(item.name))).join()}</span> :
                <span className="no_text">请选择</span>
            }
          </div>
        </Form.Item>
        <Form.Item name="serviceType" label="服务类型">
          <Input disabled/>
        </Form.Item>
        <Form.Item name="serviceProject" label="服务项目">
          <Input disabled/>
        </Form.Item>
        <Form.Item name="serviceDescribe" label="服务描述">
          <TextArea
            placeholder='请输入服务描述'
            autoSize={{ minRows: 3, maxRows: 5 }}
            onChange={onChangeValue}
          />
        </Form.Item>
        <Form.Item name="img" label="照片">
          <UploaderFile
            fileCount={3}
            multiple={true}
            onChange={onUploaderFile}
            initFileData={serviceEnterParams.img}
          />
        </Form.Item>
        <Form.Item name="evaluateDesc" label="发表评论">
          <div onClick={() => openServiceSelect(3)} className="vlaue_box">
            {
              serviceEnterParams.evaluateDesc ?
                <span className="yes_text">{serviceEnterParams.evaluateDesc}</span> :
                <span className="no_text">去评论</span>
            }
          </div>
        </Form.Item>
        <Form.Item name="score" noStyle />
      </Form>
    </div>
    <div className="footer_btn">
      <Button color="primary" type="submit" onClick={() => form.submit()}>确定</Button>
    </div>

    <PersonnelModel
      initData={serviceUserIdList.length>0 && ((serviceEnterParams.serviceUserIdList).map(item=>(item.name))).join()}
      details={location}
      visible={visible1}
      setVisible={setVisible1}
      onChange={onPersonnel}
      mode="multiple"
    />
  </div>)
}
export default ServiceEnter